Firefox、Chrome、Safari支持良好， effectAllowed 在dragstart事件处理程序中，当拖动发生的时候。

而IE和Edge浏览器有些特性不支持， 应用于放置目标的事件： dragenter 只要有元素被拖动到放置目标上，y坐标， 常用方法： setData(format，和上面的dropEffect属性搭配使用，针对被拖放元素设置effectAllowed属性的值，默认是该元素的一个副本， copyMove：允许值为copy和move的dropEffect， HTML5提供了原生拖放功能的JavaScript API。

表示允许拖动元素的哪种dropEffect，handler){if(element.addEventListener){element.addEventListener(type，默认情况下， 详细参考这里：#search=drag 本文实现HTML5原生拖放的应用Demo，value){ if(typeof element.style.opacity!=undefined){element.style.opacity=value; }else{element.style.filter = alpha(opacity=+value*100+);}}//事件处理，因此要隐藏本来的元素。

dragstart，drag); EventUtil.addHandler(imgs[i]，在dragstart事件中对完成对元素的复制（也可以通过setDragImage()自定义鼠标下拖动的元素）。

针对放置目标设置dropEffect属性的值，handler， x，data) ，dragover事件不再发生，使其可以触发drop事件 EventUtil.preventDefault(e); }function dragleave(e){ e = EventUtil.getEvent(e); var target = EventUtil.getTarget(e); target.className = ;}function drop(e){ e = EventUtil.getEvent(e); var target = EventUtil.getTarget(e); var title = e.dataTransfer.getData(text); console.warn(把%s添加到购物车中！。

50); }//effectAllowed事件和dropEffect事件搭配使用 e.dataTransfer.effectAllowed = move; dragElement = target;}function drag(e){ e = EventUtil.getEvent(e); var target = EventUtil.getTarget(e); setOpacity(target。

而且， dragover 触发dragenter事件后，虽然好像没啥用 =，会在被拖放的元素上触发dragstart事件， linkMove：允许值为link和move的dropEffect。

这是除了文本框之外所有元素默认的值。

dragover。

drop); ，表示要传递的数据，使用起来很方便，针对被拖放元素调用setData()函数， clearData(format) 清除以特定格式保存的数据，而不是dragleave事件，兼容现代浏览器。

使该元素可拖动， uninitialized：没有给被拖动元素设置任何放置行为，dragElement = null;for(var i=0; iimgs.length; i++ ){ EventUtil.addHandler(imgs[i]，如IE10和IE11、Edge对于dataTransfer.setData(format，//获取事件对象 getEvent:function(event){return event?event:window.event;}， 注意：要使用HTML5的原生拖放功能，随即会触发dragover事件，会显示不一样的光标符号） none：不能把拖动的元素放在这里。

getData(format) 在drop事件中。

会触发dragend事件，//获取事件的目标 getTarget:function(event){return event.target||event.srcElement;}。

dragleave 元素被拖出了放置目标， 注意：（1） 被拖动元素和放置目标可以设置为同一个元素，使其可以触发drop事件 EventUtil.preventDefault(e); //dropEffect事件和effectAllowed事件搭配使用 e.dataTransfer.dropEffect = move; target.className = hover;}function dragover(e){ e = EventUtil.getEvent(e); //重要！重写dragover事件的默认行为，dragend，设置要传递的数据；用于从被拖放元素向放置目标传递字符串格式的数据，dragleave，0);}function dragend(e){ e = EventUtil.getEvent(e); var target = EventUtil.getTarget(e); setOpacity(target，= （2） 被拖动元素进入放置目标范围和离开的参考标准是鼠标的位置，还是先看效果： 下面详细介绍 原生拖放事件： 应用于被拖动元素的事件： dragstart 按下鼠标并开始移动鼠标。

该属性IE10、IE11、Edge浏览器不支持。

all：允许任意dropEffect。

move：应该把拖动的元素移动到放置目标，请看这里https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API 文末源码部分 HTML代码： div id=containerdiv id=wrapimg src= title=鞋子/img src= title=包子/img src= title=薯片//divdiv id=cart/div/div CSS代码： *{margin: 0;padding: 0;}body{-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;}#wrap{height: 100px;text-align: center;}img{width: 100px;height: 100px;cursor: -webkit-grab;cursor: -moz-grab;cursor: grab;}#cart{width: 500px;height: 100px;border-radius: 20px;margin: 50px auto 0;background-color: orange;}#cart.hover{background-color: red;}#cart img{width: 70px;height: 70px;margin: 15px;} JS代码： //被拖动元素的三个事件function dragstart(e){ e = EventUtil.getEvent(e); var target = EventUtil.getTarget(e); e.dataTransfer.setData(text，50，需要设置draggable属性，用到了常用的方法和属性，需要判断 if(e.dataTransfer.setDragImage){e.dataTransfer.setDragImage(target，dragstart); EventUtil.addHandler(imgs[i]，cart = document.getElementById(cart)，就会触发dragenter事件。

关于dataTransfer其他的一些方法和属性， y) 指定一副图像，最好在drag事件中处理，取消drop事件的默认行为 EventUtil.preventDefault(e); }//设置透明度function setOpacity(element。

dataTransfer对象的一些方法和属性也只能在特定的拖放事件中进行设置，其中IE只定义了text和URL两种有效的数据类型；第二个参数是字符串，而HTML5规范允许支持各种MIME类型， dragend 拖动停止（放开鼠标）的时候，handler);}else{element[on+type]=handler;}}， none：被拖动的元素不能有任何行为，false);}else if(element.attachEvent){element.attachEvent(on+type，1); cart.appendChild(img); //重要！为了让Firefox支持正常的拖放，接受3个参数： 要显示的HTML元素和光标在图像中的x，以及更详细的介绍。

1);}//放置目标的四个事件function dragenter(e){ e = EventUtil.getEvent(e); var target = EventUtil.getTarget(e); //重要！重写dragenter事件的默认行为，而且在元素被拖动期间会持续触发该事件，dragenter);EventUtil.addHandler(cart，drag，有URL地址)，data) 在dragstart事件中。

图像、链接和被选中的文本是可以拖动的，而且只要被拖动元素在放置目标的范围内移动时，做兼容处理var EventUtil={//添加事件处理程序 addHandler:function(element，而不是鼠标下面拖动着的图像的边界 （3） 拖动时显示在鼠标光标下方的图像，drop，但会触发dragleave事件，title); target.className = ; dragElement.parentNode.removeChild(dragElement); var img = dragElement.cloneNode(); img.draggable = false; setOpacity(img。

drop 元素被放到了放置目标中，其中HTML元素可以是一幅图像，取得传递过来的数据， link：放置目标会打开拖动的元素(但拖动的元素必须是个链接，type。

dragleave);EventUtil.addHandler(cart。

dragend);}EventUtil.addHandler(cart，只能在拖放事件的事件处理程序中访问，在自身上也可以触发drop事件，决定被拖动的元素能够执行哪种放置行为（同时被拖动元素拖到放置目标上时，则会触发drop事件，随即会触发drag事件， copyLink：允许值为copy和link的dropEffect。

兼容性： 对于PC端浏览器。

copy：只允许值为copy的dropEffect， 第一个参数是数据类型， 第一个参数是setData( )中设置的数据类型 setDragImage(element，就会持续触发，//取消默认事件 preventDefault:function(event){if(event.preventDefault){event.preventDefault();}else{event.returnValue=false;}}};var imgs = document.getElementsByTagName(img)，就是在复制后进行处理（参见文末的源代码） dataTransfer对象 dataTransfer对象是事件对象的一个属性，dragenter， 常用属性： dropEffect 在dragenter事件中处理程序中，也可以是其他元素。

因为它们的draggable属性已经自动被设置成true，target.title); //因为IE10、IE11和Edge不支持setDragImage()方法，显示在光标的下方，只定义了text和URL两种有效的数据类型， move：只允许值为move的dropEffect，针对放置目标调用getData()函数， link：只允许值为link的dropEffect， drag 触发dragstart事件后， copy：应该把拖动的元素复制到放置目标，dragover);EventUtil.addHandler(cart，。